<template>
  <base-modal
    :title="$t('serviceProvider.accountTip.tip14')"
    :show.sync="disVisible"
    width="480px"
  >
    <div class="provider-batch-account-dialog">
      <el-radio-group class="account-radio" v-model="accountNum">
        <el-radio-button :label="10">10{{$t('serviceProvider.accountTip.tip3')}}</el-radio-button>
        <el-radio-button :label="20">20{{$t('serviceProvider.accountTip.tip3')}}</el-radio-button>
        <el-radio-button :label="0">{{$t('serviceProvider.accountTip.tip15')}}</el-radio-button>
      </el-radio-group>
      <div  class="account-number">
        <el-input-number 
          v-model="accountInputNum" 
          v-show="accountNum==0" 
          :min="1" 
          :max="100000000" 
          :precision="0"></el-input-number>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="plain-third" @click="disVisible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="submitAccount" :disabled="pending">{{$t('common.base.confirm')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
//api
import { saveProviderAccount } from '@src/api/serviceProviderApi';
export default {
  name: "ProviderAccount",
  data() {
    return {
      disVisible: false, // 分配账户弹框
      pending: false,
      accountNum: 0, // 账户分配的数量
      accountInputNum: 100, // 账户手动输入数量
      isBulk: false, // 是否批量分配
      tenantProviderIdList: [], // 批量分配的服务商
    }
  },
  methods: {
    openDialog(tenantProviderIdList, isBulk) {
      this.accountNum = 0;
      this.accountInputNum = 100;
      this.isBulk = isBulk;
      this.tenantProviderIdList = tenantProviderIdList;
      this.disVisible = true;
    },
    // 账户数量分配
    async submitAccount() {
      let account = this.accountNum ? this.accountNum : this.accountInputNum;
      // 调用接口去分配
      this.pending = true;
      try {
        let res = await saveProviderAccount({
          tenantProviderIdList: this.tenantProviderIdList,
          accountNum: account,
          isBulk: this.isBulk // 是否批量分配
        })
        let success = res.success;
        this.$message({
          type: success ? 'success' : 'error',
          message: success ? this.$t('common.base.distributionSuccess') : res.message
        })
        if(success) {
          this.$emit('refresh')
        }
        this.disVisible = false;
      } catch (e) {
        console.error(e)
      } finally {
        this.pending = false;
      }

    },
  }
}
</script>

<style lang="scss" scoped>
.provider-batch-account-dialog{
  padding: 20px;
  display: flex;
  flex-flow: column;
  .account-radio {
    display: flex;
    justify-content: center;
    ::v-deep .el-radio-button__inner {
      width: 80px;
      height: 32px;
    }
  }
  .account-number {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
}
</style>